<template>
  <footer class="footer">
      <span class="todo-count" v-show="leftLength"><strong>{{leftLength}}</strong>剩余</span>
      <ul class="filters">
        <li>
            <!-- v-bind加强class 允许使用对象或者数组 -->
          <a 
            :class="{selected: type === 'all'}" 
            href="#/"
            @click.prevent="changeType('all')"
          >全部</a>
        </li>
        <li>
          <a 
            :class="{selected: type === 'active'}" 
            href="#/active"
            @click.prevent="changeType('active')"
          >进行中</a>
        </li>
        <li>
          <a 
            :class="{selected: type === 'completed'}" 
            href="#/completed"
            @click.prevent="changeType('completed')"
          >已完成</a>
        </li>
      </ul>
      <button class="clear-completed" @click="cleanUp" v-show="isDoneAll">清除已完成</button>
  </footer>
</template>
<script>
export default {
  name: 'TodoFooter',
   props: {
    leftLength: {
        type: Number,
        required: true,
    },
    isDoneAll: {
        type: Boolean,
        required: true,
    },
    type: {
        type: String,
        required: true,
    }
   },
   data () {
     return {}
   },

   methods: {
    cleanUp() {
        this.$emit('cleanUp')
    },
    // 修改父组件中的type
    changeType(type) {
        this.$emit('changeType', type)
    }
   }
};
</script>
<style scoped>
</style>